<template>
  <div class="home" >
    <nav class="home-nav" >
      <!-- <router-link v-for="item in NavList" :key="item.id" :to="item.link">{{item.title}}</router-link> -->
      <van-tabs v-model="activeI" swipeable @change="changed" v-if="NavList">
        <van-tab v-for="item in NavList" :key="item.id"  :title="item.title" :to="item.link" >
        <router-view :NavList="NavList" :Recommend ="Recommend"/>
        </van-tab>

        </van-tabs>
     
      
    </nav>
<!-- <router-view /> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
import { mapState } from 'vuex';
import { Toast } from "vant";
Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "HomeView",
  components: {
    // HelloWorld
  },
  data:function(){
    return{
      NavList:null,
      Recommend:null
    
    }
  },
  methods:{
  changed:function(index){
    console.log(this.NavList[index].link);
  
      Toast({
      message: "请稍后",
      icon: "https://img01.yzcdn.cn/vant/logo.png",
      duration: 0,
    });
  this.axios
      .get("https://apis.netstart.cn/xpc"+this.NavList[index].link)
      .then((res) => {
        this.Recommend = res.data.data.children;
        console.log(res.data.data.children);
          Toast.clear();
          
              
      });
  }
  },


  created:function(){
    this.axios.get("https://apis.netstart.cn/xpc/home/config").then((res)=>{
   
      this.NavList=res.data.data.tab
      // this.NavList.forEach((ele,index) => {
       
      // });
    });
    var vueID=this.$route.query!=null?`?cateName=${this.$route.query.cateName}&channel=${this.$route.query.channel}`:''
     this.name = this.$route.params.id;
      Toast({
      message: "自定义图片",
      icon: "https://img01.yzcdn.cn/vant/logo.png",
      duration: 0,
    });
  this.axios
      .get("https://apis.netstart.cn/xpc/home/"+ this.name+vueID)
      .then((res) => {
        this.Recommend = res.data.data.children;
        console.log(res.data.data.children);
          Toast.clear();
          
              
      });
 
  },
  // update:function(index){
  //        Toast({
  //     message: "自定义图片",
  //     icon: "https://img01.yzcdn.cn/vant/logo.png",
  //     duration: 0,
  //   });
  // this.axios
  //     .get("https://apis.netstart.cn/xpc"+this.NavList[index].link)
  //     .then((res) => {
  //       this.Recommend = res.data.data.children;
  //       console.log(res.data.data.children);
  //         Toast.clear();
          
              
  //     });
  // },
  computed:{
    ...mapState(["active"]),
    activeI:{
      get(){
        return this.active
      },
      set(id){
        return id
      }
    }
  }
};
</script>
<style lang="less" scoped>
.home{

 
.home-nav {

//   background: whitesmoke;
//   display: flex;
 
//   overflow-x: scroll;
//  padding: 3px 3px;
//   align-items: center;
  a {
    display: flex;
   margin: 0 3px;
 
    font-weight: bold;
    color: #2c3e50;
    flex-shrink: 0;
 

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
}

</style>